<template>
	<view class="content">
		<view class="title" style="margin-top: 100rpx;">你的标签是？</view>
		<view class="cell">
			<view class="label">自我描述</view>
			<view class="cell-item">
				<view class="tag" :class="{'selected':1==item.isselect}" v-for="(item, index) in gxTags"
					@click="onItemClick(item, index)">{{item.name}}</view>
			</view>
		</view>

		<view class="cell">
			<view class="label">兴趣爱好</view>
			<view class="cell-item">
				<view class="tag" :class="{'selected':1==item.isselect}" v-for="(item, index) in xqTags"
					@click="onItemClick(item, index)">{{item.name}}</view>
			</view>
		</view>

		<zy-register-bottom top='60rpx' @next='next'></zy-register-bottom>
	</view>
</template>

<script>
	import RouteUtil from '@/main/common/RouteUtil.js';
	export default {
		data() {
			return {
				gxTags: [],
				xqTags: [],
				data: {
					sex: '',
					nick: '',
					birthday: '',
					heightId: '',
					weightId: '',
					careerId: '',
					incomeId: '',
					tagIds: '',
					educId: '',
					headPicId: '',
					prId: '',
					cityId: '',
					distId: '',
					passWord: '123456'
				},
			};
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			this.data = uni.getStorageSync('registerInfo');
			this.requestDict();
		},

		methods: {
			back() {
				uni.navigateBack();
			},
			next() {
				this.requestSave();
			},
			async requestDict() {
				let res = await this.$common.post("/app/user/getBiaoqian");
				if (0 == res.code) {
					let data = res.data;
					this.gxTags = data.gexing;
					this.xqTags = data.xingqu;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async requestSave() {
				let ids = '';
				let names = '';
				this.gxTags.forEach(item=>{
					if(1==item.isselect){
						if('' == ids){
							ids = item.id;
							names = item.name;
						}else{
							ids += ','+item.id;
							names += ','+item.name;
						}
					}
				})
				this.xqTags.forEach(item=>{
					if(1==item.isselect){
						if('' == ids){
							ids = item.id;
							names = item.name;
						}else{
							ids += ','+item.id;
							names += ','+item.name;
						}
					}
				})

				if ('' == ids) {
					this.$common.showToast('请选择')
					return
				}

				let res = await this.$common.post("/app/geren/upBiaoqian", {biaoqian: ids});
				if (0 == res.code) {
					this.$common.showToast('完善信息成功，欢迎进入')
					setTimeout(() => {
						uni.setStorageSync('login', true);
						RouteUtil.toHome()
					}, 500)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			onItemClick(item, index) {
				item.isselect = item.isselect == 1? 2: 1;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100wh;
		height: 100vh;
		margin: 0 50rpx;

		.title {
			font-weight: bold;
			font-size: 48rpx;
			color: #222;
		}


		.cell {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 20rpx;
			margin: 20rpx;

			.label {
				font-size: 36rpx;
				color: #222;
			}

			.cell-item {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.tag {
					padding: 10rpx 20rpx;
					background-color: #eee;
					border-radius: 50rpx;
					font-size: 24rpx;
					color: #555;
					margin: 10rpx;
				}

				.selected {
					background-color: #009fff;
					color: #fff;
				}
			}

		}


	}
</style>